<template>
  <div class="pro1">
    <p>-- 商品详情 --</p>
    <ul>
        <li v-for="item in proData">
        <span>{{item.title}}</span><i>{{item.content}}</i>
        </li>
    </ul>
    <div v-for="a in proInfo" class="pros">
        <p v-text="a.content" v-if="a.type=='3'"></p>
        <img :src="a.content" v-if="a.type=='2'">
    </div>
    <div class="pros">
        <img  v-for="b in desData.detailImgs" :src="b">
    </div>
  </div>
</template>

<script>

  export default{
    props: ['proData','proInfo','description'],
    data () {
        return {
            desData:[]
        }
    },
    created () {
        let that = this;
        setTimeout(function (){
            that.$http.get(that.description).then(data => {
                that.desData = data.data.data;
              }, err => {
                console.log(err)
            })
        },100)

    }
  }

</script>

<style scoped>
.pro1{
    padding: 10px;
    background-color: #fff;
}
.pro1>p{
    color: #333;
    height: 40px;
    text-align: center;
    font-size: 1.1rem;
}
.pro1 ul{
    margin-bottom:15px;
}
.pro1 ul li{
    width: 100%;
    line-height: 20px;
    font-size: 1.1rem;
}
.pro1 ul li>span{
    display: inline-block;
    width: 30%;
    color: #999;
    vertical-align: top;
}
.pro1 ul li>i{
    display: inline-block;
    color: #333;
    margin-left: 5%;
    width: 65%;
}
.pros img{
    width: 100%;
}
.pros p{
    font-size: 1.1rem;
    color: #000;
    line-height: 30px;
}
</style>
